<template>
  <div id="app">
    <p>默认按钮</p>
    <div class="row">
      <z-button>默认按钮</z-button>
      <z-button type="primary" @click="fn">主要按钮</z-button>
      <z-button type="success">成功按钮</z-button>
      <z-button type="info">信息按钮</z-button>
      <z-button type="warning">警告按钮</z-button>
      <z-button type="danger">危险按钮</z-button>
      <z-button type="danger">危险按钮</z-button>
    </div>
    <p>朴素按钮</p>
    <div class="row">
      <z-button plain>朴素按钮</z-button>
      <z-button plain icon="z-icon-pic" type="primary">主要按钮</z-button>
      <z-button plain type="success">成功按钮</z-button>
      <z-button plain type="info">信息按钮</z-button>
      <z-button plain type="warning">警告按钮</z-button>
      <z-button plain type="danger">危险按钮</z-button>
    </div>
    <p>round</p>
    <div class="row">
      <z-button round>朴素按钮</z-button>
      <z-button round type="primary">主要按钮</z-button>
      <z-button round type="success">成功按钮</z-button>
      <z-button round type="info">信息按钮</z-button>
      <z-button round type="warning">警告按钮</z-button>
      <z-button round type="danger">危险按钮</z-button>
    </div>
    <p>cilcle</p>
      <div class="row">
      <z-button circle>朴</z-button>
      <z-button circle type="primary">主</z-button>
      <z-button circle type="success">成</z-button>
      <z-button circle type="info">信</z-button>
      <z-button circle type="warning">警</z-button>
      <z-button circle type="danger">危</z-button>
    </div>
    <div class="row">
      <z-button circle icon="z-icon-filter"></z-button>
      <z-button circle icon="z-icon-zuojiantou" type="primary"></z-button>
      <z-button circle icon="z-icon-gouwu" type="success"></z-button>
      <z-button circle icon="z-icon-integral" type="info"></z-button>
      <z-button circle icon="z-icon-pic" type="warning"></z-button>
      <z-button circle icon="z-icon-jilu" type="danger"></z-button>
    </div>
    <p>图标按钮</p>
        <div class="row">
      <z-button  icon="z-icon-filter"></z-button>
      <z-button  icon="z-icon-zuojiantou" type="primary"></z-button>
      <z-button  icon="z-icon-gouwu" type="success"></z-button>
      <z-button  icon="z-icon-integral" type="info"></z-button>
      <z-button  icon="z-icon-pic" type="warning">搜索</z-button>
      <z-button  type="danger">上传<i class="z-icon-pic z-icon-right"></i></z-button>
    </div>
    <p>禁用状态</p>
    <div class="row">
      <z-button disabled >默认按钮</z-button>
      <z-button disabled type="primary">主要按钮</z-button>
      <z-button disabled type="success">成功按钮</z-button>
      <z-button disabled type="info">信息按钮</z-button>
      <z-button disabled type="warning">警告按钮</z-button>
      <z-button disabled type="danger">危险按钮</z-button>
    </div>
    <p>button-group</p>
    <div class="row">
      <z-button-group>
        <z-button  plain type="success">上一页</z-button>
        <z-button  plain type="success">2</z-button>
        <z-button  plain type="success">3</z-button>
        <z-button  plain type="success">...</z-button>
        <z-button  plain type="success">下一页</z-button>
      </z-button-group>
      <z-button-group>
        <z-button  plain round type="success">上一页</z-button>
        <z-button  plain type="success">2</z-button>
        <z-button  plain type="success">3</z-button>
        <z-button  plain type="success">...</z-button>
        <z-button  plain round type="success">下一页</z-button>
      </z-button-group>

    </div>

        <div class="row">
      <z-button-group>
        <z-button  plain icon='z-icon-pic' type="success"></z-button>
        <z-button  plain icon='z-icon-play' type="success"></z-button>
        <z-button  plain icon='z-icon-youjiantou' type="success"></z-button>
        <z-button  plain icon='z-icon-shangjiantou' type="success"></z-button>
        <z-button  plain icon='z-icon-shenpi' type="success"></z-button>
      </z-button-group>

    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fn (e) {
      console.log(e)
    }
  }
}
</script>

<style lang="scss">
.z-button + .z-button {
  margin-left: 10px;
}
.row {
  margin-bottom: 10px;
}
</style>
